<template>
  <div class="homeContent">
    <div class="tabr-nav-title">
      <van-nav-bar
        title="就位"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="cardList">
      <van-field
        label="就位时间"
        v-model="state.time"
        disabled
        name="picker"
        placeholder="点击选择日期"
        @click="showPopFn"
      />
      <!-- <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-picker-group
          title="预约日期"
          :tabs="['选择日期', '选择时间']"
          @confirm="handleDateConfirm"
          @cancel="showPicker = false"
        >
          <van-date-picker v-model="state.currentDate" />
          <van-time-picker v-model="state.currentTime" />
        </van-picker-group>
      </van-popup> -->
      <div class="upload-box">
        <van-uploader
          v-model="fileList"
          :before-read="beforeRead"
          :after-read="afterRead"
        >
          <van-button icon="plus" type="primary" size="small"
            >上传文件</van-button
          >
        </van-uploader>
      </div>
    </div>

    <div class="detailFoot">
      <div style="flex: 1">
        <van-button color="#26a2de" size="small" @click="handleReady"
          >确认到场</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { showToast } from "vant";
import { upload, getResponseWordDetail, editWorkStatus } from "@/api/index";
import { showFailToast, showSuccessToast } from "vant";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const state = reactive({
  minDate: new Date(2020, 0, 1),
  maxDate: new Date(2025, 11, 31),
  currentDate: [],
  currentTime: [],
  time: "",
  detail: {},
});
const queryParams = reactive({
  id: "",
  log: "",
});
const showPicker = ref(false);
const fileList = ref([]);
const showPopFn = () => {
  const date = new Date();
  const year = date.getFullYear(); // 获取四位数年份
  const month = date.getMonth() + 1; // 获取月份（注意要加1）
  const day = date.getDate(); // 获取日期
  const hour = date.getHours(); // 获取小时
  const minutes = date.getMinutes(); // 获取分钟
  state.currentDate = [year, month, day];
  state.currentTime = [hour, minutes];
  showPicker.value = true;
};
//返回
const onClickLeft = () => history.back();

// 返回布尔值
const beforeRead = (file) => {
  if (file.type !== "image/jpeg" && file.type !== "image/png") {
    showToast("请上传 jpg/png 格式图片");
    return false;
  }
  if (fileList.value.length >= 1) {
    fileList.value.shift();
  }
  return true;
};

// 上传
const afterRead = (file) => {
  const formData = new FormData();
  formData.append("file", file.file);
  file.status = "uploading";
  file.message = "上传中...";
  upload(formData).then((res) => {
    if (res.data.code === 200 && res.data.data) {
      state.detail.log = res.data.data.id;
      file.status = "done";
    }
  });
};

const handleDateConfirm = (selectedValues, selectedOptions) => {
  // state.time = `${state.currentDate.join("/")} ${state.currentTime.join(":")}`;
  showPicker.value = false;
};
// 确认到场
const handleReady = async () => {
  if (!state.detail.log) {
    showFailToast("请上传文件");
  }
  state.detail.reWorkStatus = 2;
  await editWorkStatus(state.detail);
  showSuccessToast("到场成功");
  history.back();
};

onMounted(() => {
  const date = new Date();
  const year = date.getFullYear(); // 获取四位数年份
  const month = date.getMonth() + 1; // 获取月份（注意要加1）
  const day = date.getDate(); // 获取日期
  const hour = date.getHours(); // 获取小时
  const minutes = date.getMinutes(); // 获取分钟
  state.currentDate = [year, month, day];
  state.currentTime = [hour, minutes];
  state.time = `${state.currentDate.join("/")} ${state.currentTime.join(":")}`;
  const id = route.query.id;
  getResponseWordDetail(id).then((res) => {
    if (res.data.code === 200 && res.data.data) {
      state.detail = res.data.data.reWorkMange;
    }
  });
});
</script>

<style lang="less" scoped>
.homeContent {
  background: #f7f8f7;
  text-align: center;
  padding: 0 6px;
  height: 100%;
  .tabr-nav-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    height: 50px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #29292c;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    background: #fff;
  }

  .cardList {
    margin: 10px 0;
    height: calc(100% - 80px);
    overflow-y: auto;
    width: 100%;
    background: #fff;
    .upload-box {
      padding: 10px;
      box-sizing: border-box;
      :deep(.van-uploader) {
        width: 100%;
        .van-uploader__input-wrapper {
          width: 100%;
          .van-button {
            width: 100%;
          }
        }
      }
    }
  }
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 2;
}
.van-button--small {
  width: 100%;
}
</style>
